<template class="${classes}">
    <import from="./namespace-management/namespace-management"></import>
    <import from="./reference-management/reference-management"></import>
    <import from="./package-management/package-management"></import>

    <div class="window">
        <div class="flex-grow-height-restricted d-flex flex-column">
            <ul class="tabs nav nav-tabs mb-3">
                <li class="nav-item ${tab === configStore.selectedTab ? 'active' : ''}"
                    repeat.for="tab of configStore.tabs">
                    <div class="nav-link" click.trigger="configStore.selectedTab = tab">${tab.text}</div>
                </li>
            </ul>

            <div class="flex-grow-height-restricted d-flex flex-column" style="padding: 0 5px">
                <reference-management show.bind="configStore.selectedTab.route === 'references'"
                                      class="tab-content"></reference-management>

                <package-management show.bind="configStore.selectedTab.route === 'packages'"
                                    class="tab-content"></package-management>

                <namespace-management show.bind="configStore.selectedTab.route === 'namespaces'"
                                      class="tab-content"></namespace-management>
            </div>
        </div>
        <div class="bottom-buttons-bar">
            <div class="me-auto" id="buttons"></div>
            <div>
                <button class="btn btn-primary" click.trigger="save()">Save</button>
                <button class="btn-cancel btn btn-secondary" click.trigger="cancel()">Cancel</button>
            </div>
        </div>
    </div>
</template>
